<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="../../../js/class/vue.min.js"></script>
	</head>
	<body>
		<div id="vue-app">
			<h3>v-html指令实例</h3>
			<div v-text="msg1"></div>
			<div v-html="msg1"></div>
			
			<!-- <div v-html="我是信息3"></div> -->
			<!-- 上一行将会报错：我是信息3 is not defined -->
			
			<div v-html="'我是信息3'"></div><br />
			
			<div v-html="'<div>v-html</div>'+msg3"></div><br />
			
			<div v-text="'<div>v-text</div>'+msg3"></div><br />
			
			<div>{{msg2}}</div>
		</div>
		<script type="text/javascript">
			/* 
				v-html用于输出html，它与v-text不同的是v-text输出的是纯文本格式，浏览器不会对其再进行html的解析
				然而v-html会将其当html标签或js进行解析后输出。
			 */
			"use strict"
			var vm = new Vue({
				el:"#vue-app",
				data:{
					msg1: "我是信息1",
					msg2: "我是信息2",
					msg3: "<div>我是信息5</div>"
				}
			})
		</script>
	</body>
</html>